<template>
  <div>
    <div id="container" style="height:800px; margin: 0 auto" class="bordered-div">
      <div v-if="loading" class="loading-overlay">
        正在加载数据，请稍后...
      </div>
    </div>

    <div v-if="!loading" style="margin: 10px">
      节点总数：{{ data.nodes.length }}，关系总数：{{ data.edges.length }}，
      总耗时：{{ parseInt(loadTime) }}毫秒，atlas查询耗时：{{ parseInt(atlasTime) }}毫秒，
      计算布局耗时：{{ parseInt(transTime + topoTime) }}毫秒，
      网络传输耗时：{{ parseInt(netTime) }}毫秒，渲染耗时：{{ parseInt(renderTime) }}毫秒
    </div>

  </div>
</template>

<script>
import G6 from '@antv/g6';
import sampleData from './data.json'

export default {
  name: 'LineageGraphDiv',


  data() {
    return {
      detailDrawerVisible: false,
      selectAssetInfoKey: null,

      graphWidth: 800,
      graphHeight: 800,

      loading: false,
      loadTime: 0,
      atlasTime: 0,
      transTime: 0,
      topoTime: 0,
      netTime: 0,
      apiTime: 0,
      renderTime: 0,

      data: {
        nodes: [],
        edges: []
      },

      /**
       * 默认图节点样式
       */
      defaultNode: {
        size: [300, 40],
        type: 'rect',
        logoIcon: {
          // whether to show the icon
          show: true,
          x: 0,
          y: 0,
          // the image url for the icon, string type
          img:
              'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',
          width: 16,
          height: 16,
          // adjust the offset along x-axis for the icon
          offset: 0,
        },
      },

      /**
       * 默认图边样式
       */
      defaultEdge: {
        style: {
          endArrow: {
            path: G6.Arrow.triangle(),
            fill: '#409EFF'
          },
          stroke: '#409EFF'
        }
      },

      graph: null
    }
  },

  mounted() {
    this.draw()
  },

  methods: {
    draw() {
      const startTime = performance.now();
      this.loading = true;

      // 画布大小
      const container = document.getElementById('container');
      this.graphWidth = container.scrollWidth - 40;
      this.graphHeight = (container.scrollHeight - 40) || 500;

      this.data = sampleData
      this.apiTime = performance.now() - startTime
      this.atlasTime = sampleData.atlasTime
      this.transTime = sampleData.transTime
      this.topoTime = sampleData.topoTime
      this.netTime = this.apiTime - this.atlasTime - this.transTime - this.topoTime

      this.render()
      this.loading = false;
      this.loadTime = performance.now() - startTime
      this.renderTime = performance.now() - startTime - this.apiTime
    },

    /**
     * 关闭详情抽屉
     */
    closeAssetInfoDetailDrawer() {
      this.selectAssetInfoKey = null
      this.detailDrawerVisible = false
    },

    /**
     * 渲染
     */
    render() {
      console.log('开始渲染')

      // 两个节点之间有多条边分开显示
      G6.Util.processParallelEdges(this.data.edges);

      this.graph = new G6.Graph({
        container: 'container',
        width: this.graphWidth,
        height: this.graphHeight,
        defaultNode: this.defaultNode,
        defaultEdge: this.defaultEdge,
        // 交互模式
        modes: {
          default: [
            // 节点可拖拽
            'drag-node',
            // 图可拖拽
            'drag-canvas',
            // 通过鼠标中间放大缩小
            'zoom-canvas',
            // 高亮关联节点
            'activate-relations',
            // 单击节点高亮
            'click-select',
          ],
        },
      });

      // 鼠标移入节点和边高亮显示
      this.graph.on('node:mouseenter', (e) => {
        this.graph.setItemState(e.item, 'active', true);
      });
      this.graph.on('node:mouseleave', (e) => {
        this.graph.setItemState(e.item, 'active', false);
      });
      this.graph.on('edge:mouseenter', (e) => {
        this.graph.setItemState(e.item, 'active', true);
      });
      this.graph.on('edge:mouseleave', (e) => {
        this.graph.setItemState(e.item, 'active', false);
      });

      // 点击节点打开详情抽屉
      this.graph.on('node:click', (e) => {
        this.selectAssetInfoKey = {
          stage: e.item.getModel().attributes.stage,
          type: e.item.getModel().attributes.type,
          instanceName: e.item.getModel().attributes.instanceName,
          sqlName: e.item.getModel().attributes.sqlName,
        }
        this.detailDrawerVisible = true
      })

      this.graph.data(this.data);
      this.graph.render();
    },

    /**
     * 销毁
     */
    destroy() {
      console.log('开始销毁')

      if (this.graph) {
        this.graph.destroy()
      }
    },
  }
}
</script>

<style lang="less" scoped>
/* CSS 样式，给 div 添加边框 */
.bordered-div {
  border: 2px solid #000; /* 2px 宽的实线边框，颜色为黑色 (#000) */
  padding: 20px; /* 可选：添加内边距以增加内容与边框的距离 */
}

/* 添加样式用于加载遮盖 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eeeeee; /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2; /* 设置一个较高的z-index以覆盖在图上 */
}
</style>
